
    <!doctype html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>福利导航：找工具、更快速 - 江子辰の随笔</title>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <meta name="format-detection" content="telephone=no"/>
        <meta name="renderer" content="webkit">
        <meta name="theme-color" content="#fff">
        <meta name="author" content="Lin YuJing"/>
        <meta name="keywords" content="江子辰,江辰,江太公,陈文琎,林语惊,江豪,江思涵,前端江太公,江太公的个人博客,江子辰的个人博客,江辰的个人博客,江子辰的个人网站,江太公的个人网站"/>
        <meta name="description" content="作者导语：此导航页可能存在少许作者未发现的Bug（如：链接错误，跳转失败等），如有发现，请至页面末端评论区留言或联系作者微信进行错误更正：ZiChen-Jiang1122 。同时，也欢迎各位进行知识链接补充。无论是纠正错误还是补充知识，作者或多或少都会给予相对应的奖励。我们希望每一位技术爱好者都能够"/>
            <link rel="apple-touch-icon" sizes="180x180" href="/upload/2022/10/src=http___c-ssl.duitang.com_uploads_item_202005_31_20200531192848_msCvm.thumb.1000_0.jpeg&refer=http___c-ssl.duitang-f77b072a2c5a4e3ebe6ae1a3a251f0e4.webp">
            <link rel="icon" type="image/png" sizes="32x32" href="/upload/2022/10/src=http___c-ssl.duitang.com_uploads_item_202005_31_20200531192848_msCvm.thumb.1000_0.jpeg&refer=http___c-ssl.duitang-f77b072a2c5a4e3ebe6ae1a3a251f0e4.webp">
            <link rel="icon" type="image/png" sizes="16x16" href="/upload/2022/10/src=http___c-ssl.duitang.com_uploads_item_202005_31_20200531192848_msCvm.thumb.1000_0.jpeg&refer=http___c-ssl.duitang-f77b072a2c5a4e3ebe6ae1a3a251f0e4.webp">
            <link rel="manifest" href="/upload/2022/10/src=http___c-ssl.duitang.com_uploads_item_202005_31_20200531192848_msCvm.thumb.1000_0.jpeg&refer=http___c-ssl.duitang-f77b072a2c5a4e3ebe6ae1a3a251f0e4.webp">
        <link rel="preload" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
        <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"></noscript>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"/>
        <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/styles/github.min.css" type="text/css" rel="stylesheet" />
        <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/KaTeX/0.12.0/katex.min.css" type="text/css" rel="stylesheet" />
        <link href="/themes/liao_daisy/source/css/style.css" rel="stylesheet">
        <link href="/themes/liao_daisy/source/css/github-markdown-light.css" rel="stylesheet"/>
        <link href="/themes/liao_daisy/source/css/github-markdown-dark.css" rel="stylesheet"/>
            <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" as="style">
            <style>
                html {
                    font-family: 'HarmonyOS_Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                }
            </style>
        <style>
            .hljs {
                background: #f6f8fa;
            }
        </style>
    <meta name="generator" content="Halo 1.4.17"/>
        <link rel="shortcut icon" type="images/x-icon" href="/upload/2022/10/src=http___c-ssl.duitang.com_uploads_item_202005_31_20200531192848_msCvm.thumb.1000_0.jpeg&refer=http___c-ssl.duitang-f77b072a2c5a4e3ebe6ae1a3a251f0e4.webp">
    
        
    </head>

<body class="bg-[#f9f9f9] dark:bg-neutral-800">
<div class="flex flex-col lg:flex-row">
    <header class="hidden fixed w-[330px] px-16 h-screen space-y-16 lg:flex flex-col justify-center content-start bg-white dark:bg-neutral-900">
        <div class="logo">
            <a href="https://jiangsihan.cn" title="江子辰の随笔">
                <img src="/upload/2022/10/src=http___c-ssl.duitang.com_uploads_item_202005_31_20200531192848_msCvm.thumb.1000_0.jpeg&refer=http___c-ssl.duitang-f77b072a2c5a4e3ebe6ae1a3a251f0e4.webp" alt="江子辰の随笔" class="max-h-20">
            </a>
        </div>
        <div class="nav">
            <ul class="text-767676 dark:text-[#999] space-y-2">
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/">首页 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/archives">文章 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/categories">分类 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/fuli">文档 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/journals">动态 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/links">友链 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/about">留言 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/photos">相册 </a>
                        </li>
                        <li>
                            <a class="hover:text-black dark:hover:text-white block w-full hover:tracking-wider duration-300"
                               href="/author">关于 </a>
                        </li>
            </ul>
        </div>
        <div class="flex justify-start text-767676 dark:text-[#999] text-lg space-x-3" data-no-instant>
            <button class="hover:text-black dark:hover:text-white" onclick="toggleDarkMode()">
                <i class="ri-contrast-2-line" id="darkModelIcon"></i>
            </button>
            <button class="hover:text-black dark:hover:text-white" onclick="toggleSearch()">
                <i class="ri-search-2-line"></i>
            </button>
        </div>
        <div class="copyright text-767676 dark-text-[#999]">
            <p>
                © 2022 <a class="text-black dark:text-white" href="https://jiangsihan.cn">江子辰の随笔</a>
            </p>
            <p>
                Powered by <a href="https://halo.run/" target="_blank" class="text-black dark:text-white">Halo</a>&nbsp;&&nbsp;<a href="https://github.com/liaocp666/halo-theme-daisy" target="_blank" class="text-black dark:text-white">Daisy</a>
            </p>
        </div>
            <div class="beian text-xs text-767676 space-y-1 absolute bottom-0 select-none">
                    <p>
                        <a href="https://beian.miit.gov.cn/" target="_blank">本站点已运行4年，访问量6.3w+</a>
                    </p>
                    <p>
                        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=" class="flex justify-start content-center space-x-1">
                            <img class="h-[13px] w-[13px]" src="">
                            <span>浙ICP备2022006393号-1</span>
                        </a>
                    </p>
            </div>
    </header>
    <header class="lg:hidden bg-white sticky top-0 z-50 dark:bg-neutral-900">
        <div class="flex justify-between p-4">
            <div class="logo">
                <a href="https://jiangsihan.cn" title="江子辰の随笔">
                    <img class="max-h-8" src="/upload/2022/10/src=http___c-ssl.duitang.com_uploads_item_202005_31_20200531192848_msCvm.thumb.1000_0.jpeg&refer=http___c-ssl.duitang-f77b072a2c5a4e3ebe6ae1a3a251f0e4.webp" alt="江子辰の随笔">
                </a>
            </div>
            <div class="menu dark:text-[#999] space-x-3">
                <button class="hover:text-black dark:hover:text-white" onclick="toggleDarkMode()">
                    <i class="ri-contrast-2-line" id="darkModelIcon"></i>
                </button>
                <button class="hover:text-black dark:hover:text-white" onclick="toggleSearch()">
                    <i class="ri-search-2-line"></i>
                </button>
                <button onclick="toggleNav()">
                    <i class="ri-menu-3-line"></i>
                </button>
            </div>
        </div>
        <div class="mobile-nav right-0 bg-white h-full w-full dark:bg-neutral-900" id="mobileNav" style="display: none">
            <ul class="text-767676 space-y-6 py-6">
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/"
                               target="_self">首页 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/archives"
                               target="_self">文章 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/categories"
                               target="_self">分类 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/fuli"
                               target="_self">文档 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/journals"
                               target="_self">动态 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/links"
                               target="_self">友链 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/about"
                               target="_self">留言 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/photos"
                               target="_self">相册 </a>
                        </li>
                        <li>
                            <a class="hover:text-black block w-full hover:tracking-wider duration-300 text-center"
                               href="/author"
                               target="_self">关于 </a>
                        </li>
            </ul>
        </div>
    </header>
    <div id="search" style="display: none" class="fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto bg-white dark:bg-neutral-900 z-50 flex justify-center content-center items-center">
        <div class="absolute right-2 top-2">
            <button class="text-3xl text-767676 cursor-pointer hover:text-black dark:text-[#999] dark:hover:text-white" onclick="toggleSearch()"><i class="ri-close-circle-line"></i></button>
        </div>
        <div class="search-wrap">
            <form method="get" action="/search" role="search" class="flex justify-start content-center">
                <input autocomplete="off" class="border-b border-stone-300 dark:border-[#999] focus:outline-none focus:border-b w-full bg-transparent"
                       type="search"
                       name="keyword" placeholder="Search" required>
                <button type="submit" class="dark:text-[#999] dark:hover:text-white">
                    <i class="ri-search-2-line"></i>
                </button>
            </form>
        </div>
    </div>
    <div class="flex flex-col lg:pl-[330px] w-full">
        <div class="page-title my-20 mx-auto lg:page-mqx-width w-full lg:px-[40px]">
            <h1 class="text-4xl font-black subpixel-antialiased pl-4 lg:pl-0 dark:text-white" id="fillTitle">福利导航：找工具、更快速</h1>
        </div>
        <div class="flex flex-col lg:flex-row w-full mx-auto lg:page-mqx-width lg:space-x-8 lg:px-[40px]">
            <div class="page-content lg:w-[73%] block overflow-hidden">
                <div class="page-item hover:shadow-lg duration-300 mb-12">
                    <div class="page-content bg-white p-4 lg:p-8 text-767676 flex flex-col space-y-3 dark:bg-neutral-900">
                        <div class="page-meta text-[##767676] text-base flex justify-between">
                            <div class="">
                                <span>
                                    2022-03-14
                                </span>
                            </div>
                            <div>
                                <a class="flex space-x-2 block" href="#comment" title="评论一下">
                                    <i class="ri-chat-2-line"></i>
                                    <span>18</span>
                                </a>
                            </div>
                        </div>
                        <div class="border-b border-gray-300 w-full"></div>
                        <div class="page-summary markdown-body pb-2" id="post-content">
                            <blockquote>
<p>作者导语：此导航页可能存在少许作者未发现的Bug（如：链接错误，跳转失败等），如有发现，请至页面末端评论区留言或联系作者微信进行错误更正：<code>ZiChen-Jiang1122</code> 。同时，也欢迎各位进行知识链接补充。无论是纠正错误还是补充知识，作者或多或少都会给予相对应的奖励。我们希望每一位技术爱好者都能够从这里快速找到自己所需要的学习资料，无论经验年限长短与否，都应砥砺前行，成为最顶级的技术人才！最后，技术之路，任道重远！<br />
———  前端 江辰.  2022.03.17</p>
</blockquote>
<hr />
<style>
.biaoti{
        text-align: center;
        font-weight: 600;
        font-size: 20px;
    }
    .kjBox{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    hr{
        margin: 20px 0;
    }
    .shequBox{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    	padding: 10px;
    }
    .box_chi{
        width: 320px;
	margin: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    	background: #efefff;
    	border-radius: 10px;
    }
    .box_chi>.img{
        width: 60px;
	height:70px;
    }
    .box_chi>.img img{
        width: 100%;
border-radius: 20%;
    }
    .box_chi>.text{    
        width: 60%;
    }
    .box_chi p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 0;
    }
    .js_box{
        text-align: center;
        width:150px;
        border: 1px dashed;
	margin:10px
    }
.js_box p{margin-bottom: 0}
    .jsds{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
     .kaifang{
	    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;	
    }
    .kaifang a{
        display: inline-block;
        width: 250px;
        height: 90px;
        background-size: 100%;
        background-repeat: no-repeat;
	margin:10px
    }
    .kaifang a:nth-child(1){
        background-image: url(http://file.coderfuli.com/images/t8ChRy8nrZ4CQfNQQwPjJbak73BeAcBK.png);
    }
    .kaifang a:nth-child(2){
        background-image: url(http://file.coderfuli.com/images/6nFYYsbrffNG7rfffm5TMZrpzXpdJfzd.png);
    }
    .kaifang a:nth-child(3){
        background-image: url(http://file.coderfuli.com/images/Eya2tKmKbPn4Wdd5e5s88AJjmp5GFiYT.png);
    }
    .kaifang a:nth-child(4){
        background-image: url(http://file.coderfuli.com/images/Hcjde3s8XM8NyxsHkCeWCspBXE88JSSy.png)
    }
    .kaifang a:nth-child(5){
        background-image: url(http://file.coderfuli.com/images/33A6fmN4CeSQpicdWXWchKGY6JHQkjwH.png)
    }
    .kaifang a:nth-child(6){
        background-image: url(http://file.coderfuli.com/images/srywYQGE64c4jFhwZSb3ywbj5Esiwjxa.png)
    }
    .kaifang a:nth-child(7){
        background-image: url(http://file.coderfuli.com/images/swQFTbMFpPDwMEentADGTmhsTXBHA8y3.png)
    }
    .kaifang a:nth-child(8){
        background-image: url(http://file.coderfuli.com/images/zrXYzTpar2bzD5AKtnxXs3crwNhW88sF.png)
    }
    .kaifang a:nth-child(9){
        background-image: url(http://file.coderfuli.com/images/52dEaJdwhmmtiD3B54aBZaKC4WptHdTx.png)
    }
    .kaifang a:nth-child(10){
        background-image: url(http://file.coderfuli.com/images/E5s2wi7i52QpEn4dJ5ZR5PXtxxxNPSrk.png)
    }
    .kaifang a:nth-child(11){
        background-image: url(http://file.coderfuli.com/images/TsSmmibjyFeAA4x86eExbf8Ezh5KhAb4.png)
    }
    .kaifang a:nth-child(12){
        background-image: url(http://file.coderfuli.com/images/3HZt6t3FJDzY7TA6GWwX8Bc43cmMsr6t.png)
    }
    .kaifang a:nth-child(13){
        background-image: url(http://file.coderfuli.com/images/SbJYJHx6arnri2J7rFRX7RdpZJCNjPiw.png)
    }
    .kaifang a:nth-child(14){
        background-image: url(http://file.coderfuli.com/images/tCbR5bwntXNp7EHe8iF4eQFwAstX4zPP.png)
    }
    .kaifang a:nth-child(15){
        background-image: url(http://file.coderfuli.com/images/7EKByRdnyBazamyBc736GK6TARtsRjYD.png)
    }
    .kaifang a:nth-child(16){
        background-image: url(http://file.coderfuli.com/images/yda4pGXYinamt5j5emnF8b4PCCrnMKKN.png)
    }
</style>
<p class="biaoti">开源框架</p>
<h3 id="qianduan">前端</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="https://uniapp.dcloud.io/" target="_blank"
                title="响应式、多端、跨平台综合性前端框架">Uni-app</a></div>
        <div style="margin: 0 10px;"><a href="https://cn.vuejs.org/" target="_blank" title="渐进式JavaScript框架">VueJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://v3.cn.vuejs.org/" target="_blank"
                title="渐进式JavaScript框架">Vue3.0</a></div>
<div style="margin: 0 10px;"><a href="https://kazupon.github.io/vue-i18n/zh/" target="_blank"
                title="Vue I18n 是 Vue.js 的国际化插件">Vue-i18n</a> </div>
<div style="margin: 0 10px;"><a href="https://www.nuxtjs.cn/" target="_blank"
                        title="Nuxt.js 是一个基于 Vue.js 的通用应用框架,一个用于Vue.js 开发SSR应用的一站式解决方案。">NuxtJS</a> </div>
        <div style="margin: 0 10px;"><a href="https://blog.csdn.net/ZiChen_Jiang/article/details/123505882" target="_blank"
                title="最成熟的Vue ssr 服务端渲染框架，一个命令就能启动和部署。">Minissr</a> </div>
        <div style="margin: 0 10px;"><a href="https://reactjs.org/" target="_blank"
                title="用于构建用户界面的 JavaScript 库">React</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.nextjs.cn/" target="_blank"
                title="Next.js 是一个轻量级的 React 服务端渲染应用框架。">NextJS</a> </div>
        <div style="margin: 0 10px;"><a href="https://angular.cn/" target="_blank"
                title="一个基于组件的框架，用于构建可伸缩的 Web 应用">Angular</a> </div>
        <div style="margin: 0 10px;"><a href="https://flutterchina.club/" target="_blank"
                title="Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面">Flutter</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.bootcss.com/" target="_blank"
                title="简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。">bootcss</a></div>
        <div style="margin: 0 10px;"><a href="https://preactjs.com/" target="_blank"
                title="使用相同的现代 API 快速 3kB 替代 React">Preact</a> </div>
        <div style="margin: 0 10px;"><a href="https://element.eleme.cn/" target="_blank" title="网站快速成型工具">ElementUI</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://ant.design/index-cn" target="_blank"
                title="企业级产品设计体系，创造高效愉悦的工作体验">Ant-Design</a> </div>
        <div style="margin: 0 10px;"><a href="https://vant-contrib.gitee.io/vant/#/zh-CN/" target="_blank"
                title="轻量、可靠的移动端 Vue 组件库">Vant-UI</a> </div>
        <div style="margin: 0 10px;"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank"
                title="轻量、可靠的小程序 UI 组件库">Vant-Weapp</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.iconfont.cn/" target="_blank" title="阿里巴巴矢量图标库">Iconfont</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.iviewui.com/" target="_blank" title="一套基于 Vue.js 的高质量
    UI 组件库">IviewUI</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.vue-treeselect.cn/" target="_blank"
                title="一个多选组件，具有对 Vue.js嵌套选项支持。">VueTreeselect</a> </div>
        <div style="margin: 0 10px;"><a href="https://vuetifyjs.com/en/" target="_blank"
                title="一个带有精美手工材质组件的 Vue UI 库">Vuetify</a> </div>
        <div style="margin: 0 10px;"><a href="https://muse-ui.org//" target="_blank"
                title="基于 Vue 2.0 优雅的 Material Design UI 组件库">MuseUI</a> </div>
        <div style="margin: 0 10px;"><a href="https://weui.io/" target="_blank" title="微信原生视觉体验一致的基础样式库">Weui</a> </div>
        <div style="margin: 0 10px;"><a href="http://mint-ui.github.io/#!/zh-cn" target="_blank"
                title="基于 Vue.js 的移动端组件库">MintUI</a> </div>
        <div style="margin: 0 10px;"><a href="https://flatui.com/" target="_blank" title="免费的WEB界面工具组件库">Flat UI</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.tailwindcss.cn/" target="_blank"
                title="Tailwind CSS 是一个功能类优先的 CSS 框架">Tailwind css</a> </div>
        <div style="margin: 0 10px;"><a href="http://amazeui.shopxo.net/" target="_blank"
                title="中国首个开源 HTML5 跨屏前端框架">Amaze ui</a> </div>
        <div style="margin: 0 10px;"><a href="https://apache.github.io/incubator-weex-ui/#/" target="_blank"
                title="一个交互丰富、轻量级、高性能的UI库。">Weex UI</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.muicss.com/" target="_blank" title="轻量级的CSS框架">MUI</a> </div>
        <div style="margin: 0 10px;"><a href="http://www.animate.net.cn/" target="_blank"
                title="强大的跨平台的预设css3动画库">Animate</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.postcss.com.cn/" target="_blank"
                title="一个用 JavaScript 工具和插件转换 CSS 代码的工具">Postcss</a> </div>
        <div style="margin: 0 10px;"><a href="https://layui.me/" target="_blank" title="开源模块化前端 UI 框架">Layui</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.sasscss.com/" target="_blank"
                title="Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。">Sass</a> </div>
        <div style="margin: 0 10px;"><a href="http://lesscss.cn/" target="_blank" title="一门 CSS 预处理语言">Less</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.cssnano.cn/" target="_blank"
                title="让网站的 CSS 文件加载更快">Cssnano</a></div>
        <div style="margin: 0 10px;"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/"
                target="_blank" title="简单、高效的应用开发框架和丰富的组件及API">微信小程序</a></div>
        <div style="margin: 0 10px;"><a href="https://opendocs.alipay.com/mini/development" target="_blank"
                title="支付宝建立的自由开放平台 API">支付宝小程序</a></div>
        <div style="margin: 0 10px;"><a href="https://microapp.bytedance.com/" target="_blank"
                title="字节新形式的应用程序">字节小程序</a></div>
        <div style="margin: 0 10px;"><a href="https://q.qq.com/wiki/" target="_blank" title="轻便快捷的开发模式">QQ小程序</a></div>
        <div style="margin: 0 10px;"><a href="https://smartprogram.baidu.com/docs/" target="_blank"
                title="百度智能小程序开发文档">百度智能小程序</a></div>
<div style="margin: 0 10px;"><a href="http://www.jeecg.com/" target="_blank"
                        title="前后端分离架构 SpringBoot 2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发">JeecgBoot</a></div>
</div>
<h3 id="houduan">后端</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="https://spring.io/" target="_blank" title="主流的 Java EE 轻量级开源框架">Spring</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://spring.io/projects/spring-boot" target="_blank"
                title="在 Spring 的基础上提供的一套全新的开源框架">Spring-boot</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://hibernate.org/" target="_blank"
                title="一个开放源代码的对象关系映射框架">Hibernate</a></div>
        <div style="margin: 0 10px;"><a href="https://github.com/mybatis" target="_blank"
                title="用于 Java 的 MyBatis SQL 映射器框架">Mybatis</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://shiro.apache.org/" target="_blank"
                title="功能强大且易于使用的 Java 安全框架">shiro</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://spring.io/projects/spring-security" target="_blank"
                title="功能强大且高度可定制的身份验证和访问控制框架">Spring Security</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.rabbitmq.com/" target="_blank"
                title="RabbitMQ 是部署最广泛的开源消息代理。">RabbitMQ</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://spring.io/projects/spring-cloud" target="_blank"
                title="为开发者提供了工具来快速构建分布式系统中的一些常见模式">Spring-cloud</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://spring.io/projects/spring-cloud-alibaba" target="_blank"
                title="提供分布式应用开发的一站式解决方案">Spring-cloud-alibaba</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://baomidou.com/" target="_blank"
                title="MyBatis-Plus（简称 MP）是一个 MyBatis (opens new window)的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。">MyBatis-Plus</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://github.com/quarkusio/quarkus" target="_blank"
                title="开源的 Java 微服务框架">Quarkus</a>
        </div>
</div>
<h3 id="H5">Node</h3>
<div class="kjBox">
<div style="margin: 0 10px;"><a href="https://nodejs.org/zh-cn/" target="_blank"
                title="Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。">NodeJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.expressjs.com.cn/" target="_blank"
                title="基于 Node.js 平台，快速、开放、极简的 Web 开发框架">Express</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://koa.bootcss.com/" target="_blank"
                title="Koa -- 基于 Node.js 平台的下一代 web 开发框架">Koa</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.eggjs.org/zh-CN/" target="_blank"
                title="使用 Node.js 和 Koa 构建更好的企业框架和应用程序">Egg</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://nestjs.com/" target="_blank"
                title="用于构建高效、可靠和可扩展的服务器端应用程序的渐进式 Node.js 框架。">NestJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://thinkjs.org/" target="_blank" title="使用完整的 ES6/7 功能开发 Node.js 应用程序。">ThinkJS</a>
        </div>
<div style="margin: 0 10px;"><a href="https://www.nuxtjs.cn/" target="_blank"
                        title="Nuxt.js 是一个基于 Vue.js 的通用应用框架,一个用于Vue.js 开发SSR应用的一站式解决方案。">NuxtJS</a> </div>
        <div style="margin: 0 10px;"><a href="https://nextjs.org/" target="_blank"
                title="Next.js 是一个轻量级的 React 服务端渲染应用框架。">NextJS</a></div>
        <div style="margin: 0 10px;"><a href="https://blog.csdn.net/ZiChen_Jiang/article/details/123505882" target="_blank"
                title="最成熟的Vue ssr 服务端渲染框架，一个命令就能启动和部署。">Minissr</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.redux.org.cn/" target="_blank"
                title="Redux 是 JavaScript 状态容器，提供可预测化的状态管理。">Redux</a></div>
</div>
<h3 id="H5">移动端</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="http://mpvue.com/" target="_blank"
                title="一个使用 Vue.js 开发小程序的前端框架">Mpvue</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://wepyjs.github.io/wepy-docs/index.html" target="_blank"
                title="一个最受欢迎的小程序框架.">WePY</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://weex.emas-poc.com/zh/" target="_blank"
                title="Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架">Weex</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://vant-contrib.gitee.io/vant/#/zh-CN" target="_blank"
                title="Vant 是有赞前端团队开源的移动端组件库">Vant</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://vux.li/" target="_blank" title="一个凑合的 Vue.js 移动端 UI 组件库">Vux</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.npmjs.com/package/vueg" target="_blank"
                title="为Vue应用添加页面间的转场特效">Vueg</a></div>
</div>
<h3 id="kuapingtai">跨平台</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="https://flutterchina.club/" target="_blank"
                title="Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面">Flutter</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://uniapp.dcloud.io/" target="_blank"
                title="响应式、多端、跨平台综合性前端框架">Uni-app</a></div>
        <div style="margin: 0 10px;"><a href="https://reactnative.cn/" target="_blank"
                title="React Native 将原生开发的最佳部分与 React 相结合， 致力于成为构建用户界面的顶尖 JavaScript 框架。">React Native</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://ionicframework.com/" target="_blank"
                title="一个开源移动工具包，用于构建高质量、跨平台的原生和 Web 应用程序体验。使用单一代码库更快地移动，使用 JavaScript 和 Web 随处运行。">Ionic</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.electronjs.org/" target="_blank"
                title="使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序">Electron</a> </div>
        <div style="margin: 0 10px;"><a href="http://cordova.axuer.com/" target="_blank"
                title="Cordova 是用于使用HTML,CSS和JS构建移动应用的平台">Cordova</a> </div>
        <div style="margin: 0 10px;"><a href="https://nativescript.org/" target="_blank"
                title="NativeScript 可以使用 Javascript，CSS, XML 创建真正的 Native 跨平台应用，支持 iOS Android，NativeScript 将您的跨平台代码翻译成目标平台的代码">NativeScript</a>
        </div>
</div>
<h3 id="app">客户端</h3>
<div style="display: flex;flex-wrap: wrap;flex-direction: column;">
        <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;">
            iOS：
            <div style="margin: 0 10px;"><a href="https://developer.apple.com/documentation/objectivec" target="_blank"
                    title="Objective-C 是您在为 OS X 和 iOS 编写软件时使用的主要编程语言">Objective-C
                </a>
            </div>
            <div style="margin: 0 10px;"><a href="https://developer.apple.com/swift/" target="_blank"
                    title="Swift 是一种功能强大且直观的编程语言，适用于 iOS、iPadOS、macOS、tvOS 和 watchOS">Swift</a></div>
            <div style="margin: 0 10px;"><a href="https://developer.apple.com/xcode/swiftui/"
                    target="_blank" title="SwiftUI 可帮助您利用 Swift 的强大功能在所有 Apple 平台上构建美观的应用程序，并且代码尽可能少">SwiftUI</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://developer.apple.com/documentation/uikit/uiview"
                    target="_blank" title="管理屏幕上矩形区域内容的对象。">UIView</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://developer.apple.com/documentation/uikit/uiview"
                    target="_blank" title="管理基于图像的内容并允许您对该内容执行动画的对象。">CAlayer</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://developer.apple.com/cn/testflight/" target="_blank"
                    title="使用TestFlight 是帮助开发者测试 Beta 版 App 的理想方式。">TestFlight</a>
            </div>
            <div style="margin: 0 10px;"><a
                    href="https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/Cocoa.html"
                    target="_blank" title="Cocoa 和 Cocoa Touch 分别是 OS X 和 iOS 的应用程序开发环境">Cocoa</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://developer.apple.com/xcode/" target="_blank"
                    title="Xcode 是运行在操作系统Mac OS X上的集成开发工具（IDE）">Xcode</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://makeappicon.com/" target="_blank"
                    title="移动开发人员的最佳应用程序图标调整器">Make-App-Icon</a>
            </div>
        </div>
        <div style="display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;">
            android：
            <div style="margin: 0 10px;"><a href="https://www.oracle.com/java/" target="_blank"
                    title="Java是一门面向对象的编程语言">java安卓</a> </div>
            <div style="margin: 0 10px;"><a href="https://developer.android.google.cn/docs" target="_blank"
                    title="面向Android应用开发者的文档">Android</a> </div>
            <div style="margin: 0 10px;"><a href="https://developer.android.google.cn/kotlin" target="_blank"
                    title="使用 Kotlin 更快地编写更好的 Android 应用程序。Kotlin 是一种现代静态类型编程语言">Kotlin</a> </div>
            <div style="margin: 0 10px;"><a href="https://developer.android.google.cn/jetpack" target="_blank"
                    title="Jetpack是一套组件库">Jetpack</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://qmuiteam.com/android" target="_blank"
                    title="致力于提高Android项目 UI 开发效率的解决方案">QMUI</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://github.com/xuexiangjys/XUI/wiki" target="_blank"
                    title="简洁而又优雅的Android原生UI框架">XUI</a>
            </div>
            <div style="margin: 0 10px;"><a
                    href="https://developer.android.google.cn/topic/libraries/architecture/livedata.html"
                    target="_blank" title="一种可观察的数据存储器类">LiveData</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://muyangmin.github.io/glide-docs-cn/" target="_blank"
                    title="一个快速高效的Android图片加载库，注重于平滑的滚动">Glide</a>
            </div>
            <div style="margin: 0 10px;"><a href="https://developer.android.google.cn/studio/" target="_blank"
                    title="Android Studio 为在各种类型的 Android 设备上构建应用程序提供了最快的工具。">Android Studio</a>
            </div>
        </div>
</div>
<h3 id="echarts">数据可视化</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="https://echarts.apache.org/zh/index.html" target="_blank"
                title="一个基于 JavaScript 的开源可视化图表库">Echarts</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://d3js.org/" target="_blank" title="D3数据驱动的文档">D3</a></div>
        <div style="margin: 0 10px;"><a href="https://www.highcharts.com/" target="_blank"
                title="为开发人员打造的坚如磐石且极其灵活的图表库。">HighCharts</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.chartjs.org/" target="_blank"
                title="为设计人员和开发人员提供简单而灵活的 JavaScript 图表">Ehart</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://antv.vision/zh/" target="_blank"
                title="蚂蚁集团全新一代数据可视化解决方案">Antv</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.amcharts.com/" target="_blank"
                title="JavaScript 图表和地图">Amcharts</a> </div>
        <div style="margin: 0 10px;"><a href="http://www.fusionchartschina.com.cn/" target="_blank"
                title="创建漂亮的网络和移动仪表板">FusionCharts</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://www.fusionchartschina.com.cn/" target="_blank"
                title="创建漂亮的网络和移动仪表板">FusionCharts</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.anychart.com/zh/" target="_blank"
                title="AnyChart 是一种包含出色的 API 和文档的轻型、可靠的 JavaScript 图表解决方案">AnyChart</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.graphviz.org/" target="_blank"
                title="Graphviz 是开源图形可视化软">Gallery</a>
        </div>
</div>
<h3 id="goujian">构建管理</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="https://www.npmjs.com/" target="_blank" title=" Node 包管理器">NPM</a>
        </div>
 <div style="margin: 0 10px;"><a href="https://vitejs.dev/" target="_blank" title="下一代前端构建工具">Vite</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://yarnpkg.com/" target="_blank" title="Yarn 是一个包管理器，兼任项目经理">Yarn</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://webpack.js.org/" target="_blank"
                title="现代 JavaScript 应用程序的静态模块打包器">Webpack</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.gulpjs.com.cn/" target="_blank"
                title="自动化构建工具增强你的工作流程">Gulp</a> </div>
        <div style="margin: 0 10px;"><a href="https://bower.io/" target="_blank" title="Web 的包管理器">Bower</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://cn.eslint.org/" target="_blank"
                title="可组件的 JavaScript 和 JSX 检查工具">Eslint</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://ejs.co/" target="_blank" title="嵌入式 JavaScript 模板。">Ejs</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.rollupjs.com/" target="_blank"
                title="一个 JavaScript 模块打包器">Rollup</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.parceljs.cn/" target="_blank"
                title="极速零配置Web应用打包工具">Parcel</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://browserify.org/" target="_blank"
                title="Browserify 允许您通过捆绑所有依赖项在浏览器中require( 'modules' )。">Browserify</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://yeoman.io/" target="_blank"
                title="用于现代 webapps 的 WEB 脚手架工具">Yeoman</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://liquid.bootcss.com/" target="_blank"
                title="安全、面向客户的模板语言，用于构建灵活的 web 应用">Liquid</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://handlebarsjs.com/" target="_blank"
                title="Handlebars 提供了必要的功能，让您可以轻松有效地构建语义模板。">Handlebars</a>
        </div>
</div>
<h3 id="leiku">类库工具</h3>
<div class="kjBox">
<div style="margin: 0 10px;"><a href="https://www.jq22.com/" target="_blank" title="jQuery插件库、收集最好的jq插件">jQuery插件库</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://momentjs.cn/" target="_blank" title="JavaScript 日期处理类库">Moment</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://mockjs.com/" target="_blank" title="生成随机数据，拦截 Ajax 请求">MockJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://bluebirdjs.com/docs/getting-started.html" target="_blank"
                title="Bluebird 是一个第三方 Promise 规范实现库,它不仅完全兼容原生 Promise 对象,且比原生对象功能更强大。">Bluebird</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://caolan.github.io/async/v3/" target="_blank"
                title="Async 是一个实用模块，它为使用异步 JavaScript 提供了直接、强大的功能">Async</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://cn.rx.js.org/" target="_blank"
                title="RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易">RxJS</a> </div>
        <div style="margin: 0 10px;"><a href="http://danieltao.com/lazy.js/" target="_blank"
                title="Lazy.js 是一个用于 JavaScript 的函数式实用程序库">LazyJS </a> </div>
        <div style="margin: 0 10px;"><a href="https://www.lodashjs.com/" target="_blank"
                title="Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。">Lodash</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://dayjs.gitee.io/zh-CN/" target="_blank"
                title="Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。">DayJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://mathjs.org/" target="_blank"
                title="适用于 JavaScript 和 Node.js 的广泛数学库">MathJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.bootcdn.cn/" target="_blank"
                title="稳定、快速、免费的前端开源项目 CDN 加速服务">BootCDN</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.creative-tim.com/" target="_blank"
                title="完全编码的 UI 工具，用于创建 Web 和移动应用程序">Creative-Tim</a>
        </div>
        <div style="margin: 0 10px;"><a
                href="https://www.webpackjs.com/loaders/babel-loader/#%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3"
                target="_blank" title="Babel是一个JavaScript编译器,能够让我们放心的使用新一代JS语法">Babel-loader</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.npmjs.com/package/vue-quill-editor" target="_blank"
                title="基于 Quill、适用于 Vue 的丰富文本编辑器，支持服务端渲染和单页应用。">Vue-Quill-Editor</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://hc199421.gitee.io/vue-ueditor-wrap/#/home" target="_blank"
                title="一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。省去了初始化 UEditor、手动调用 getContent，setContent 等繁琐的步骤。">Vue-ueditor-wrap</a>
        </div>
<div style="margin: 0 10px;"><a href="https://chenjiahan.github.io/vodal/" target="_blank"
                title="基于Vue的模态框组件，包含多种展现动画效果。">Vue-Vodal</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://github.com/chengxulvtu/cxlt-vue2-toastr" target="_blank"
                title="弹出提示的Vue2组件。">Cxlt-vue2-toastr</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://github.com/ElemeFE/vue-msgbox" target="_blank"
                title="一个类似 Sweet Alert 的 Vue 弹框提示组件">Vue-msgbox</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://github.com/adeptoas/sweet-modal-vue" target="_blank"
                title="精美的点击提示对话框">Sweet-modal-vue</a>
        </div>
<div style="margin: 0 10px;"><a href="https://view.xdocin.com/" target="_blank"
                title="XDOC表单将文档、表单、报表融为一体，以Flash的形式嵌入在网页中，提供仿纸质的文档式表单">XDOC文档预览云服务</a>
        </div>
</div>
<h3 id="GIS">GIS地图</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="https://developers.arcgis.com/" target="_blank"
                title="API、工具和定位服务。">ArcGIS</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.supermap.com/" target="_blank"
                title="依托中国科学院强大的科研实力，超图软件立足技术创新，研制了新一代地理信息系统软件——SuperMap GIS">SuperMap</a></div>
        <div style="margin: 0 10px;"><a href="http://www.mapbox.cn/" target="_blank" title="Mapbox是开发人员的地图平台">MapBox</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://leafletjs.com/" target="_blank"
                title="用于交互式地图的JavaScript库。">LeafletJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://cesium.com/" target="_blank" title="3D 地理空间平台">Cesium</a> </div>
        <div style="margin: 0 10px;"><a href="http://marsgis.cn/" target="_blank" title="火星地理信息系统">火星GIS</a> </div>
        <div style="margin: 0 10px;"><a href="https://www.tianditu.gov.cn/" target="_blank" title="国家地理信息系统">天地图</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://lbs.amap.com/" target="_blank" title="高德地图开放平台">高德地图</a> </div>
        <div style="margin: 0 10px;"><a href="https://lbsyun.baidu.com/" target="_blank" title="百度地图开放平台">百度地图</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://lbs.qq.com/" target="_blank" title="腾讯位置服务平台">腾讯地图</a> </div>
</div>
<h3 id="sand">3D</h3>
<div class="kjBox">
        <div style="margin: 0 10px;"><a href="https://threejs.org/" target="_blank"
                title="three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。">ThreeJS</a>
        </div>
        <div style="margin: 0 10px;"><a href="http://www.thingjs.com/guide/" target="_blank"
                title="物联网可视化PaaS开发平台,帮助物联网开发商轻松集成 3D 可视化界面">ThingJS</a></div>
        <div style="margin: 0 10px;"><a href="https://www.cocos.com/" target="_blank"
                title="Cocos引擎是由触控科技推出的游戏开发一站式解决方案，包含了从新建立项、游戏制作、到 打包上线的全套流程。">Cocos引擎</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://www.egret.com/" target="_blank"
                title="Egret Engine(白鹭引擎)是白鹭时代推出的一款使用TypeScript语言构建的开源免费的移动游戏引擎。">白鹭引擎</a>
        </div>
        <div style="margin: 0 10px;"><a href="https://alibaba.github.io/G3D/" target="_blank"
                title="基于 WebGL 的 Javascript 3D 绘图引擎">G3D</a> </div>
        <div style="margin: 0 10px;"><a href="https://docs.unity3d.com/Manual/index.html" target="_blank"
                title="创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具">Unity3d</a> </div>
</div>
<h3 id="GIS">入门指南 · 白皮书 · API文档</h3>
<div class="jsds">
     <a href="https://www.linuxcool.com/" target="_blank">
        <div class="js_box">
                <p>LInux命令大全</p>
        </div>
     </a>
     <a href="http://hemin.cn/jq/" target="_blank">
        <div class="js_box">
                <p>JQuery速查表</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/git.html" target="_blank">
        <div class="js_box">
                <p>Git速查表</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/bash.html" target="_blank">
        <div class="js_box">
                <p>Bash速查表</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/shell.html" target="_blank">
        <div class="js_box">
                <p>Shell速查表</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/vim.html" target="_blank">
        <div class="js_box">
                <p>Vim速查表</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/tmux.html" target="_blank">
        <div class="js_box">
                <p>Tmux</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/gdb.html" target="_blank">
        <div class="js_box">
                <p>GDB</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/adb.html" target="_blank">
        <div class="js_box">
                <p>ADB</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/ffmpeg.html" target="_blank">
        <div class="js_box">
                <p>FFmpeg</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/python.html" target="_blank">
        <div class="js_box">
                <p>Python</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/php.html" target="_blank">
        <div class="js_box">
                <p>PHP</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/go.html" target="_blank">
        <div class="js_box">
                <p>Go</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/sql.html" target="_blank">
        <div class="js_box">
                <p>SQL</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/mysql.html" target="_blank">
        <div class="js_box">
                <p>MySQL</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/redis.html" target="_blank">
        <div class="js_box">
                <p>Redis</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/regular.html" target="_blank">
        <div class="js_box">
                <p>正则表达式</p>
        </div>
     </a>
     <a href="https://doc.zdzn.net/cheatsheet/nginx.html" target="_blank">
        <div class="js_box">
                <p>Nginx</p>
        </div>
     </a>
     <a href="https://es6.ruanyifeng.com/" target="_blank">
        <div class="js_box">
                <p>ES6入门</p>
        </div>
     </a>
     <a href="https://www.tslang.cn/docs/home.html" target="_blank">
        <div class="js_box">
                <p>TypeScript入门</p>
        </div>
     </a>
     <a href="https://www.w3school.com.cn/jsref/index.asp" target="_blank">
        <div class="js_box">
                <p>JavaScript入门</p>
        </div>
     </a>
     <a href="https://coffeescript.org/#introduction" target="_blank">
        <div class="js_box">
                <p>CoffeeScript指南</p>
        </div>
     </a>
     <a href="https://www.runoob.com/manual/PostgreSQL/" target="_blank">
        <div class="js_box">
                <p>PostgreSQL手册</p>
        </div>
     </a>
     <a href="https://cn.vuejs.org/v2/guide/" target="_blank">
        <div class="js_box">
                <p>Vue指南</p>
        </div>
     </a>
     <a href="http://springboot.fun/" target="_blank">
        <div class="js_box">
                <p>Spring Boot 中文</p>
        </div>
     </a>
     <a href="http://springcloud.fun/" target="_blank">
        <div class="js_box">
                <p>Spring Cloud 中文</p>
        </div>
     </a>
     <a href="https://ustbhuangyi.github.io/vue-analysis/" target="_blank">
        <div class="js_box">
                <p>VUE源码揭秘</p>
        </div>
     </a>
</div>
<hr>
<p class="biaoti">技术大神</p>
<div class="jsds">
     <a href="https://sofi.sh/" target="_blank">
        <div class="js_box">
                <p>林建锋</p>
                <p style="font-size: 12px;color: gray;">饿了么 Element-UI 负责人</p>
        </div>
     </a>
     <a href="https://www.w3cplus.com/" target="_blank">
        <div class="js_box">
                <p>大漠</p>
                <p style="font-size: 12px;color: gray;">W3CPlus创始人</p>
        </div>
     </a>
     <a href="http://evanyou.me/" target="_blank">
        <div class="js_box">
                <p>尤雨溪</p>
                <p style="font-size: 12px;color: gray;">前端大神 Vue.js作者</p>
        </div>
     </a>
     <a href="https://www.liaoxuefeng.com/" target="_blank">
        <div class="js_box">
                <p>廖雪峰</p>
                <p style="font-size: 12px;color: gray;">全栈工程师，系列教程作者</p>
        </div>
     </a>
     <a href="https://coolshell.cn/" target="_blank">
        <div class="js_box">
                <p>陈皓</p>
                <p style="font-size: 12px;color: gray;">MegaEase创始人</p>
        </div>
     </a>
     <a href="https://www.ruanyifeng.com/" target="_blank">
        <div class="js_box">
                <p>阮一峰</p>
                <p style="font-size: 12px;color: gray;">计算机科普博主</p>
        </div>
     </a>
     <a href="https://www.zhangxinxu.com/wordpress/" target="_blank">
        <div class="js_box">
                <p>张鑫旭</p>
                <p style="font-size: 12px;color: gray;">知名前端技术博主</p>
        </div>
     </a>
     <a href="https://blog.csdn.net/Luoshengyang" target="_blank">
        <div class="js_box">
                <p>罗升阳</p>
                <p style="font-size: 12px;color: gray;">老罗的Android之旅</p>
        </div>
     </a>
     <a href="https://jakewharton.com/" target="_blank">
        <div class="js_box">
                <p>Jake Wharton</p>
                <p style="font-size: 12px;color: gray;">Android大神</p>
        </div>
     </a>
     <a href="https://blog.csdn.net/lmj623565791" target="_blank">
        <div class="js_box">
                <p>鸿洋</p>
                <p style="font-size: 12px;color: gray;">国内Android大佬</p>
        </div>
     </a>
     <a href="https://www.hukai.me/" target="_blank">
        <div class="js_box">
                <p>胡凯</p>
                <p style="font-size: 12px;color: gray;">腾讯高级安卓</p>
        </div>
     </a>
     <a href="http://mindhacks.cn/" target="_blank">
        <div class="js_box">
                <p>刘未鹏</p>
                <p style="font-size: 12px;color: gray;">Mind Hacks 思维改变生活</p>
        </div>
     </a>
     <a href="https://timyang.net/" target="_blank">
        <div class="js_box">
                <p>Tim Yang</p>
                <p style="font-size: 12px;color: gray;">微博架构师</p>
        </div>
     </a>
     <a href="https://yuanming.taichi.graphics/" target="_blank">
        <div class="js_box">
                <p>胡渊鸣</p>
                <p style="font-size: 12px;color: gray;">麻省理工图形学博士</p>
        </div>
     </a>
     <a href="https://www.cnblogs.com/rubylouvre/" target="_blank">
        <div class="js_box">
                <p>司徒正美</p>
                <p style="font-size: 12px;color: gray;">Java专家、前端架构师</p>
        </div>
     </a>
     <a href="https://www.cnblogs.com/winter-cn/" target="_blank">
        <div class="js_box">
                <p>程劭非</p>
                <p style="font-size: 12px;color: gray;">阿里JavaScript高级专家</p>
        </div>
     </a>
     <a href="https://jiongks.name/" target="_blank">
        <div class="js_box">
                <p>勾三股四</p>
                <p style="font-size: 12px;color: gray;">阿里高级前端</p>
        </div>
     </a>
     <a href="https://aimingoo.github.io/" target="_blank">
        <div class="js_box">
                <p>周爱民</p>
                <p style="font-size: 12px;color: gray;">JS大神，Ruff架构师</p>
        </div>
     </a>
     <a href="https://www.zhihu.com/people/yue-ying-2-61" target="_blank">
        <div class="js_box">
                <p>吴亮</p>
                <p style="font-size: 12px;color: gray;">360高级技术经理</p>
        </div>
     </a>
     <a href="http://www.cssmagic.net/" target="_blank">
        <div class="js_box">
                <p>CSS魔法</p>
                <p style="font-size: 12px;color: gray;">《CSS 揭秘》译者 架构师</p>
        </div>
     </a>
     <a href="https://www.zhihu.com/people/yanhaijing" target="_blank">
        <div class="js_box">
                <p>颜海镜</p>
                <p style="font-size: 12px;color: gray;">react大神，任职美团</p>
        </div>
     </a>
</div>
<hr/>
<p class="biaoti">技术团队</p>
<div class="kjBox">
     <div style="margin: 0 10px;"><a href="https://102.alibaba.com/" target="_blank"
             title="阿里技术">阿里技术团队</a>
     </div>
     <div style="margin: 0 10px;"><a href="https://tech.meituan.com/" target="_blank"
        title="美团技术">美团技术团队</a>
     </div>
     <div style="margin: 0 10px;"><a href="http://www.alloyteam.com/" target="_blank"
             title="腾讯前端">腾讯前端团队</a>
     </div>
     <div style="margin: 0 10px;"><a href="https://cdc.tencent.com/" target="_blank"
             title="腾讯DOC">腾讯CDC</a>
     </div>
     <div style="margin: 0 10px;"><a href="https://tgideas.qq.com/" target="_blank"
             title="腾讯创意">腾讯创意团队</a>
     </div>
     <div style="margin: 0 10px;"><a href="https://xiaomi-info.github.io//" target="_blank"
        title="小米信息">小米信息部</a>
     </div>
      <div style="margin: 0 10px;"><a href="https://tech.youzan.com/" target="_blank"
        title="有赞技术">有赞技术团队</a>
      </div>
      <div style="margin: 0 10px;"><a href="https://blogs.360.cn/" target="_blank"
        title="360 核心安全技术">360 核心安全技术</a>
      </div>
      <div style="margin: 0 10px;"><a href="http://fex.baidu.com/" target="_blank"
        title="百度FEX">百度FEX</a>
      </div>
      <div style="margin: 0 10px;"><a href="http://fed.taobao.org/" target="_blank"
        title="淘宝前端团队">淘宝前端团队</a>
      </div>
</div>
<hr>
<p class="biaoti">开放平台</p>
<div class="kaifang">
        <a target="_blank" href="https://ai.qq.com/" title="腾讯AI开放平台"></a>
        <a target="_blank" href="https://open.weibo.com/" title="微博开放平台"></a>
        <a target="_blank" href="https://mp.weixin.qq.com/" title="微信公众平台"></a>
        <a target="_blank" href="https://ai.baidu.com/" title="百度AI开放平台"></a>
        <a target="_blank" href="https://apollo.auto/" title="百度Apollo智能交通"></a>
        <a target="_blank" href="https://open.alipay.com/" title="支付宝开放平台"></a>
        <a target="_blank" href="https://lbs.amap.com/" title="高德开放平台"></a>
        <a target="_blank" href="https://lbsyun.baidu.com/ title="百度地图开放平台"></a>
        <a target="_blank" href="https://open.tencent.com/" title="腾讯开放平台"></a>
        <a target="_blank" href="https://open.dingtalk.com/" title="钉钉开放平台"></a>
        <a target="_blank" href="https://om.qq.com/userAuth/index" title="腾讯内容开放平台"></a>
        <a target="_blank" href="https://open.douyin.com/platform/" title="抖音开放平台"></a>
        <a target="_blank" href="https://lbs.qq.com/" title="腾讯位置服务"></a>
        <a target="_blank" href="https://open.pinduoduo.com/application/home" title="拼多多开放平台"></a>
        <a target="_blank" href="https://union.jd.com/openplatform" title="京东联盟"></a>
        <a target="_blank" href="https://iot.mi.com/" title="小米loT开发者平台"></a>
</div>
<hr />
<p class="biaoti">技术社区</p>
<div class="shequBox">
    <div class="box_chi" title="专业开发社区 拥有3000w+用户">
        <div class="img"><img src="http://file.coderfuli.com/images/KGsE3PWQrRaDRe8ZAkXQbFcQPMGQn8Tn.png" alt=""></div>
        <div class="text">
         <a href="https://www.csdn.net/" target="_blank">CSDN</a>
            <p style="font-size: 12px;">专业开发社区 拥有3000w+用户</p>
        </div>
    </div>
    <div class="box_chi" title="Where Developers Learn, Share, & Build Careers">
        <div class="img"><img src="http://file.coderfuli.com/images/8XY7FTc76YeeGFb2zfyheSkwnGshpw5i.png" alt=""></div>
        <div class="text"> 
          <a href="https://stackoverflow.com/" target="_blank">StackOverflow</a>
            <p style="font-size: 12px;">Where Developers Learn, Share, & Build Careers</p>
        </div>
    </div>
    <div class="box_chi" title="极客帮">
        <div class="img"><img src="http://file.coderfuli.com/images/ydrcjTcdrCXaED7j7cx3eEch3cDxeQ2t.png" alt=""></div>
        <div class="text"> 
        <a href="https://www.infoq.cn/" target="_blank">infoq</a>
            <p style="font-size: 12px;">极客帮</p>
        </div>
    </div>
    <div class="box_chi" title="代码不止，掘金不停">
        <div class="img"><img src="http://file.coderfuli.com/images/QMsP4x334knQtpWhj6n3cJPPHQJtMjya.png" alt=""></div>
        <div class="text"> 
          <a href="https://juejin.cn/" target="_blank">掘金</a>
            <p style="font-size: 12px;">代码不止，掘金不停</p>
        </div>
    </div>
    <div class="box_chi" title="云计算、物联网、大数据、安全、开发、运维等技术领域">
        <div class="img"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2Fd6f1f6b2235ffd5c85389b51e6b9de3e.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649898435&t=cf8f623a2a4abc3a7e4dc3ef2ff06d61" alt=""></div>
        <div class="text"> 
         <a href="https://developer.aliyun.com/" target="_blank">阿里云开发者社区</a>
            <p style="font-size: 12px;">云计算、物联网、大数据、安全、开发、运维等技术领域</p>
        </div>
    </div>
    <div class="box_chi" title="为开发者提供资源工具、学习交流、应用实践、大赛活动">
        <div class="img"><img src="https://img0.baidu.com/it/u=1694730529,2389309977&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
        <div class="text"> 
           <a href="https://developer.huaweicloud.com/" target="_blank">华为云开发者社区</a>
            <p style="font-size: 12px;">为开发者提供资源工具、学习交流、应用实践、大赛活动</p>
        </div>
    </div>
    <div class="box_chi" title="提供中文编程基础技术教程的知识平台">
        <div class="img"><img src="https://img2.baidu.com/it/u=4215241341,4086989804&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
        <div class="text"> 
            <a href="https://my.oschina.net/qcloudcommunity/" target="_blank">腾讯云开发者社区</a>
            <p style="font-size: 12px;">提供中文编程基础技术教程的知识平台</p>
        </div>
    </div>
    <div class="box_chi" title="为开发者提供学习交流平台">
        <div class="img"><img src="https://img0.baidu.com/it/u=4169958193,3859746861&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
        <div class="text"> 
           <a href="https://forum.microapp.bytedance.com/mini-app" target="_blank">字节跳动开发者社区</a>
            <p style="font-size: 12px;">为开发者提供学习交流平台</p>
        </div>
    </div>
    <div class="box_chi" title="百度开发者中心是一个面向开发者的知识分享平台">
        <div class="img"><img src="https://img0.baidu.com/it/u=1689946363,1749888826&fm=253&fmt=auto&app=120&f=PNG?w=200&h=200" alt=""></div>
        <div class="text"> 
            <a href="https://www.oschina.net/project/jd" target="_blank">百度AI开发者中心</a>
            <p style="font-size: 12px;">百度开发者中心是一个面向开发者的知识分享平台</p>
        </div>
    </div>
    <div class="box_chi" title="OSCHINA.NET 推出的代码托管平台">
        <div class="img"><img src="https://qnc.qjnice.com/1647259969042favicon-9007bd527d8a7851c8330e783151df58.png" alt=""></div>
        <div class="text"> 
        <a href="https://blog.gitee.com/" target="_blank">Gitee</a>
            <p style="font-size: 12px;">OSCHINA.NET 推出的代码托管平台</p>
        </div>
    </div>
    <div class="box_chi" title="开发者的网上家园">
        <div class="img"><img src="http://file.coderfuli.com/images/YKkpwQYprysKeZzWssApsafdt7F8AJiY.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.cnblogs.com/" target="_blank">博客园</a>
            <p style="font-size: 12px;">开发者的网上家园</p>
        </div>
    </div>
    <div class="box_chi" title="技术成就梦想">
        <div class="img"><img src="http://file.coderfuli.com/images/ktY6SRjeD5p6jrWYsfYhin6BwGP3aPiF.png" alt=""></div>
        <div class="text"> 
           <a href="https://www.51cto.com/" target="_blank">51CTO</a>
            <p style="font-size: 12px;">技术成就梦想</p>
        </div>
    </div>
    <div class="box_chi" title="国内最大开源技术社区">
        <div class="img"><img src="http://file.coderfuli.com/images/6zFyWBG4Chw5B35b7ZmpbmJpAexkBp2S.png" alt=""></div>
        <div class="text"> 
          <a href="https://www.oschina.net/" target="_blank">开源中国</a>
            <p style="font-size: 12px;">国内最大开源技术社区</p>
        </div>
    </div>
    <div class="box_chi" title="最大中文技术交流问答社区">
        <div class="img"><img src="http://file.coderfuli.com/images/tQwFCQDWexkeMSRwSwhXWE7XTY5mwXxz.png" alt=""></div>
        <div class="text"> 
           <a href="https://segmentfault.com/" target="_blank">SegmentFault</a>
            <p style="font-size: 12px;">最大中文技术交流问答社区</p>
        </div>
    </div>
    <div class="box_chi" title="专业的Linux/Unix应用开发者社区">
        <div class="img"><img src="http://file.coderfuli.com/images/SA35F5bZQR8JMwthbtSdeEQKjFzbJQ83.png" alt=""></div>
        <div class="text"> 
           <a href="http://www.chinaunix.net/" target="_blank">ChinaUnix</a>
            <p style="font-size: 12px;">专业的Linux/Unix应用开发者社区</p>
        </div>
    </div>
    <div class="box_chi" title="众多爱好者共同维护的 Ruby 中文社区">
        <div class="img"><img src="http://file.coderfuli.com/images/Diece3JtMtpiZNpmXb5eCCHxcPptexKn.png" alt=""></div>
        <div class="text"> 
            <a href="https://ruby-china.org/" target="_blank">Ruby China</a>
            <p style="font-size: 12px;">众多爱好者共同维护的 Ruby 中文社区</p>
        </div>
    </div>
    <div class="box_chi" title="GO语言中文网">
        <div class="img"><img src="http://file.coderfuli.com/images/2cefQYZiBsdr8XwsF4RkHGzKbDfF7EWa.png" alt=""></div>
        <div class="text"> 
      <a href="https://studygolang.com/" target="_blank">Golang中文社区</a>
            <p style="font-size: 12px;">GO语言中文网</p>
        </div>
    </div>
    <div class="box_chi" title="程序员分享平台">
        <div class="img"><img src="http://file.coderfuli.com/images/atF4dzGdk7DjadAGYKzh2tsWSWxtEmsM.png" alt=""></div>
        <div class="text"> 
            <a href="https://studygolang.com/" target="_blank">开发者头条</a>
            <p style="font-size: 12px;">程序员分享平台</p>
        </div>
    </div>
</div>
<hr>
<p class="biaoti">开发工具</p>
<h3 id="GIS">IDE</h3>
<div class="shequBox">
    <div class="box_chi" title="适用于 iOS/macOS 开发的智能 IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/AQ8fEQ8xZCt3Xw67A7XFKSZBrKn7X7ds.png" alt=""></div>
        <div class="text"> 
          <a href="https://www.jetbrains.com/zh-cn/objc/" target="_blank">AppCode</a>
            <p style="font-size: 12px;">适用于 iOS/macOS 开发的智能 IDE</p>
        </div>
    </div>
    <div class="box_chi" title="面向专业开发者的Python IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/x7KcCXpYaGyz2fMnTQJHFHrSNAhK4aNJ.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/pycharm/" target="_blank">PyCharm</a>
            <p style="font-size: 12px;">面向专业开发者的Python IDE</p>
        </div>
    </div>
    <div class="box_chi" title="最智能的 JavaScript IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/RR7ReWDSkJsFyDDiKb7rBSfyJNBFRnDm.png" alt=""></div>
        <div class="text"> 
           <a href="https://www.jetbrains.com/zh-cn/webstorm/" target="_blank">WebStorm</a>
            <p style="font-size: 12px;">最智能的 JavaScript IDE</p>
        </div>
    </div>
    <div class="box_chi" title="GoLand 使读取、写入和更改 Go 代码变得非常容易">
        <div class="img"><img src="http://file.coderfuli.com/images/ri4PCsybFtsfR7AwzGWEKXD5rsmcwRmp.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/go/" target="_blank">GoLand</a>
            <p style="font-size: 12px;">GoLand 使读取、写入和更改 Go 代码变得非常容易</p>
        </div>
    </div>
    <div class="box_chi" title="多种数据库，一个工具">
        <div class="img"><img src="http://file.coderfuli.com/images/ZiwkMThMJnC5iQ2c24khZSGxtKGddBEy.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/datagrip/" target="_blank">DataGrip</a>
            <p style="font-size: 12px;">多种数据库，一个工具</p>
        </div>
    </div>
    <div class="box_chi" title="Free. Built on open source. Runs everywhere.">
        <div class="img"><img src="http://file.coderfuli.com/images/N4aG4TjFs7zBfSrTBZ2wSdmZGKQyizKN.png" alt=""></div>
        <div class="text"> 
            <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a></p>
            <p style="font-size: 12px;">Free. Built on open source. Runs everywhere.</p>
        </div>
    </div>
    <div class="box_chi" title="功能强大，符合人体工程学的 JVM IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/T8E2NeGPsajfjfJASnsJwj7n66iAfbR7.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/idea/" target="_blank">IntelliJ IDEA</a></p>
            <p style="font-size: 12px;">功能强大，符合人体工程学的 JVM IDE</p>
        </div>
    </div>
    <div class="box_chi" title="高效智能的PHP IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/nwx7tw7H3RndxczNbCZc3xpKaxdn8ZdN.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/phpstorm//" target="_blank">PhpStorm</a>
            <p style="font-size: 12px;">高效智能的PHP IDE</p>
        </div>
    </div>
    <div class="box_chi" title="最智能的 Ruby 与 Rails IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/2f5TstEyDZGPy26BwES4Qw5sC6PAbwJi.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/ruby/" target="_blank">RubyMine</a>
            <p style="font-size: 12px;">最智能的 Ruby 与 Rails IDE</p>
        </div>
    </div>
    <div class="box_chi" title="更深入了解数据库基础架构。
现在支持 SQL Server。">
        <div class="img"><img src="https://navicat.com.cn/images/Navicat_16_Premium_win_256x256.ico" alt=""></div>
        <div class="text"> 
            <a href="https://navicat.com.cn/" target="_blank">Navicat</a>
            <p style="font-size: 12px;">更深入了解数据库基础架构。
现在支持 SQL Server</p>
        </div>
    </div>
    <div class="box_chi" title="for Mac, iPhone, iPad, Apple TV, and Apple Watch.">
        <div class="img"><img src="http://file.coderfuli.com/images/MrP2CBX56EM5Qfanim3MYYhWfF7Twdz6.png" alt=""></div>
        <div class="text"> 
            <a href="https://developer.apple.com/xcode/" target="_blank">XCode</a>
            <p style="font-size: 12px;">for Mac, iPhone, iPad, Apple TV, and Apple Watch.</p>
        </div>
    </div>
    <div class="box_chi" title="最快速的App开发工具">
        <div class="img"><img src="http://file.coderfuli.com/images/Bw6nhzRCYTPmehERKfyZmpYTjSdZHGDc.png" alt=""></div>
        <div class="text"> 
            <a href="https://developer.android.google.cn/studio/install" target="_blank">Android Studio</a>
            <p style="font-size: 12px;">最快速的App开发工具</p>
        </div>
    </div>
    <div class="box_chi" title="基于Eclipse加上功能强大插件的企业级集成开发环境">
        <div class="img"><img src="http://file.coderfuli.com/images/ZaNMPGdna6bFZdY8xSnRS42423AdbcWB.png" alt=""></div>
        <div class="text"> 
          <a href="https://developer.apple.com/xcode/" target="_blank">MyEclipse</a>
            <p style="font-size: 12px;">基于Eclipse加上功能强大插件的企业级集成开发环境</p>
        </div>
    </div>
    <div class="box_chi" title="著名的跨平台的自由集成开发环境">
        <div class="img"><img src="http://file.coderfuli.com/images/dZkTYSkPH8Tz3iJKex8BNRJhTMhYNRyy.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.genuitec.com/products/myeclipse/" target="_blank">Eclipse</a>
            <p style="font-size: 12px;">著名的跨平台的自由集成开发环境</p>
        </div>
    </div>
    <div class="box_chi" title="C 和 C++ 跨平台 IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/PcejsfnMwkRwTEKFzyWNRBrJh25sBjmz.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/clion/" target="_blank">CLion</a>
            <p style="font-size: 12px;">C 和 C++ 跨平台 IDE</p>
        </div>
    </div>
    <div class="box_chi" title="快速且强大的跨平台 .NET IDE">
        <div class="img"><img src="http://file.coderfuli.com/images/MscHfTS6JhwcpTH62DbiRezerdDxJjmp.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.jetbrains.com/zh-cn/rider/" target="_blank">Rider</a>
            <p style="font-size: 12px;">快速且强大的跨平台 .NET IDE</p>
        </div>
    </div>
    <div class="box_chi" title="开发小程序，你不能没有它">
        <div class="img"><img src="http://file.coderfuli.com/images/b33sDrTFmijbhDAfA6PRxK5HAXTeZdQz.png" alt=""></div>
        <div class="text"> 
            <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html" target="_blank">微信开发者工具</a>
            <p style="font-size: 12px;">开发小程序，你不能没有它</p>
        </div>
    </div>
    <div class="box_chi" title="支付宝提供丰富的SDK、开发及监控工具">
        <div class="img"><img src="https://qnc.qjnice.com/1647354143688zfb.png" alt=""></div>
        <div class="text"> 
            <a href="https://opendocs.alipay.com/mini/ide" target="_blank">支付宝开发者工具</a>
            <p style="font-size: 12px;">支付宝提供丰富的SDK、开发及监控工具</p>
        </div>
    </div>
    <div class="box_chi" title="QQ小程序开发者工具的目的是帮助开发者可以更高效地开发和调试QQ小程序">
        <div class="img"><img src="https://img0.baidu.com/it/u=1622699731,2387912926&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""></div>
        <div class="text"> 
            <a href="https://q.qq.com/wiki/tools/devtool/" target="_blank">QQ开发者工具</a>
            <p style="font-size: 12px;">QQ小程序开发者工具的目的是帮助开发者可以更高效地开发和调试QQ小程序</p>
        </div>
    </div>
    <div class="box_chi" title="支持小程序开发、调试、预览、上传等基本功能">
        <div class="img"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a1745b6d68c5a801206a3540eab5.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649946573&t=ac28075db266b2aabb3666281df8650c" alt=""></div>
        <div class="text"> 
            <a href="https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/developer-instrument/overview/" target="_blank">字节跳动开发者工具</a>
            <p style="font-size: 12px;">支持小程序开发、调试、预览、上传等基本功能</p>
        </div>
    </div>
    <div class="box_chi" title="Web IDE 无需安装随时进行百度小程序的开发">
        <div class="img"><img src="https://img1.baidu.com/it/u=511421164,603477287&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" alt=""></div>
        <div class="text"> 
            <a href="https://smartprogram.baidu.com/docs/develop/devtools/history/" target="_blank">百度智能开发者工具</a>
            <p style="font-size: 12px;">Web IDE 无需安装随时进行百度小程序的开发</p>
        </div>
    </div>
    <div class="box_chi" title="支当前最快的HTML开发工具">
        <div class="img"><img src="https://download1.dcloud.net.cn/uploads/images/hbuilderx/icon/hbuilderx_icon@2x.png" alt=""></div>
        <div class="text"> 
            <a href="https://www.dcloud.io/hbuilderx.html" target="_blank">Hbuilder X</a>
            <p style="font-size: 12px;">当前最快的HTML开发工具</p>
        </div>
    </div>
</div>
<h3 id="GIS">工具</h3>
<div class="shequBox">
        <div class="box_chi" title="最好用的解压工具，没有之一">
            <div class="img"><img src="http://file.coderfuli.com/images/sNYSBF6DFx4Yh2JimsRSejHptKTQWZjS.png" alt=""></div>
            <div class="text"> 
              <a href="https://www.7-zip.org/" target="_blank">7zip</a>
                <p style="font-size: 12px;">最好用的解压工具，没有之一</p>
            </div>
        </div>
        <div class="box_chi" title="必备的版本管理工具">
        <div class="img"><img src="http://file.coderfuli.com/images/3Bn8SJQB6hiE5RAhCkh2MbFSx7G2AT2Y.png" alt=""></div>
        <div class="text"> 
          <a href="https://www.7-zip.org/" target="_blank">Git</a>
            <p style="font-size: 12px;">必备的版本管理工具</p>
        </div>
        </div>
<div class="box_chi" title="开放源代码的版本控制系统">
                <div class="img"><img src="https://tortoisesvn.net/assets/img/favicons/apple-touch-icon.69c56b08.png" alt=""></div>
                <div class="text"> 
                  <a href="https://tortoisesvn.net/" target="_blank">Svn</a>
                    <p style="font-size: 12px;">开放源代码的版本控制系统</p>
                </div>
        </div>
        <div class="box_chi" title="思如泉涌，成竹在图">
                <div class="img"><img src="http://file.coderfuli.com/images/rXbJzCWNCjJSZaxmPQ83RrQ3CwBnZDDS.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.xmind.cn/" target="_blank">XMind</a>
                    <p style="font-size: 12px;">思如泉涌，成竹在图</p>
                </div>
        </div>
        <div class="box_chi" title="新一代效率工具">
                <div class="img"><img src="http://file.coderfuli.com/images/e6bxprxX7fTzwS3JKZsWibextPDNWGrd.png" alt=""></div>
                <div class="text"> 
                  <a href="http://www.u.tools/" target="_blank">uTools</a>
                    <p style="font-size: 12px;">新一代效率工具</p>
        </div></div>
        <div class="box_chi" title="抓包神器YYDS">
                <div class="img"><img src="http://file.coderfuli.com/images/AwsXJ2MsQwaJaReHa4XbdaJFTfZ6ea7x.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.charlesproxy.com/" target="_blank">Charles</a>
                    <p style="font-size: 12px;">抓包神器YYDS</p>
        </div></div>
        <div class="box_chi" title="API 文档、API 调试、API Mock、API 自动化测试">
                <div class="img"><img src="http://file.coderfuli.com/images/eFXZXAAmrXNM6tYKC8JZS7YkH7fWts88.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.apifox.cn/?utm_source=baidu_sem&utm_term=Postman" target="_blank">Apifox</a>
                    <p style="font-size: 12px;">API 文档、API 调试、API Mock、API 自动化测试</p>
        </div></div>
        <div class="box_chi" title="人人都知道的API调试工具">
                <div class="img"><img src="http://file.coderfuli.com/images/mEwAHPQQYSjEnycXntzypC2WMt2wK3PT.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.postman.com/" target="_blank">Postman</a>
                    <p style="font-size: 12px;">人人都知道的API调试工具</p>
        </div></div>
        <div class="box_chi" title="linux进程管理神器">
                <div class="img"><img src="http://file.coderfuli.com/images/t5pdJ3GeY2yTwf6mA6b7ctZ6jESzEmPj.png" alt=""></div>
                <div class="text"> 
                  <a href="https://htop.dev/" target="_blank">htop</a>
                    <p style="font-size: 12px;">linux进程管理神器</p>
        </div></div>
        <div class="box_chi" title="代码统计工具">
                <div class="img"><img src="http://file.coderfuli.com/images/JTDzZbDXfP2TaKfYR2pjp7XsrffrYnZM.png" alt=""></div>
                <div class="text"> 
                  <a href="https://github.com/AlDanial/cloc/releases" target="_blank">cloc</a>
                    <p style="font-size: 12px;">代码统计工具</p>
        </div></div>
        <div class="box_chi" title="复制即翻译的外文辅助阅读翻译工具">
                <div class="img"><img src="http://file.coderfuli.com/images/TEpmxFtNenCxQzHGQnK6xMxsCcDNDpMh.png" alt=""></div>
                <div class="text"> 
                  <a href="https://copytranslator.github.io/" target="_blank">CopyTranslator</a>
                    <p style="font-size: 12px;">复制即翻译的外文辅助阅读翻译工具</p>
        </div></div>
        <div class="box_chi" title="GIF动画制作工具">
                <div class="img"><img src="http://file.coderfuli.com/images/Q3P57D8yFa5xFMckN4WtPzBBC7scPAm3.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.producthunt.com/posts/giphy-capture" target="_blank">GIPHY CAPTURE</a>
                <p style="font-size: 12px;">GIF动画制作工具</p>
        </div></div>
</div>
<hr>
<p class="biaoti">素材资源</p>
<div class="shequBox">
        <div class="box_chi" title="阿里巴巴旗下矢量图标库">
            <div class="img"><img src="http://file.coderfuli.com/images/kKpjHpeS4bzd6FJZFsdpjFFcz5hBRwyk.png" alt=""></div>
            <div class="text"> 
              <a href="https://www.iconfont.cn/" target="_blank">IconFont</a>
                <p style="font-size: 12px;">阿里巴巴旗下矢量图标库</p>
            </div>
        </div>
        <div class="box_chi" title="中国UI设计素材">
                <div class="img"><img src="http://file.coderfuli.com/images/wzfPaJsptWyEB7JFFjAkt8emR5SkrPbw.png" alt=""></div>
                <div class="text"> 
                  <a href="http://www.sooui.com//" target="_blank">搜UI</a>
                    <p style="font-size: 12px;">中国UI设计素材</p>
                </div>
        </div>
        <div class="box_chi" title="用户体验设计平台">
                <div class="img"><img src="http://file.coderfuli.com/images/PjQX477PPt24mEQaEAbNZtCHc2yk64TT.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.ui.cn/" target="_blank">UI中国</a>
                    <p style="font-size: 12px;">用户体验设计平台</p>
                </div>
        </div>
        <div class="box_chi" title="阿里云提供的省市县三级地图选择器">
                <div class="img"><img src="http://file.coderfuli.com/images/kayBjNFz8tCSS6tnjPTDYiRJ4s3iXEjb.png" alt=""></div>
                <div class="text"> 
                  <a href="http://datav.aliyun.com/portal/school/atlas/area_selector" target="_blank">地图选择器</a>
                    <p style="font-size: 12px;">阿里云提供的省市县三级地图选择器</p>
                </div>
        </div>
        <div class="box_chi" title="阿里巴巴开源镜像站">
                <div class="img"><img src="http://file.coderfuli.com/images/SZMzhprXkKjhraEepyhFRbTZrYMZQD3w.png" alt=""></div>
                <div class="text"> 
                  <a href="https://developer.aliyun.com/mirror/" target="_blank">OPSX镜像</a>
                    <p style="font-size: 12px;">阿里巴巴开源镜像站</p>
                </div>
        </div>
        <div class="box_chi" title="清华大学开源软件镜像站">
                <div class="img"><img src="http://file.coderfuli.com/images/iMDFHhYE5QRCyNKjZdncZ5tDJ2ddc8Bk.png" alt=""></div>
                <div class="text"> 
                  <a href="https://mirrors.tuna.tsinghua.edu.cn/" target="_blank">TUNA镜像</a>
                    <p style="font-size: 12px;">清华大学开源软件镜像站</p>
                </div>
        </div>
        <div class="box_chi" title="网易开源镜像站">
                <div class="img"><img src="http://file.coderfuli.com/images/ytYDt2hDic8EaPBTyeMaM3CwT3dzpEdb.png" alt=""></div>
                <div class="text"> 
                  <a href="http://mirrors.163.com/" target="_blank">163镜像</a>
                    <p style="font-size: 12px;">网易开源镜像站</p>
                </div>
        </div>
        <div class="box_chi" title="笔试测评在线面试人才推荐平台">
                <div class="img"><img src="http://file.coderfuli.com/images/w5MdHaGAZHbk3sCsMit2TWiWBCEN7e2n.png" alt=""></div>
                <div class="text"> 
                  <a href="https://hr.nowcoder.com/" target="_blank">牛客网</a>
                    <p style="font-size: 12px;">笔试测评在线面试人才推荐平台</p>
                </div>
        </div>
        <div class="box_chi" title="专业的表情包搜索网站">
                <div class="img"><img src="http://file.coderfuli.com/images/QEafPWQsSM66DsiiRQcA7NhBsfFrpKKy.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.dbbqb.com/" target="_blank">逗比拯救世界</a>
                    <p style="font-size: 12px;">专业的表情包搜索网站</p>
                </div>
        </div>
        <div class="box_chi" title="PPT模板，创意设计素材高效办公">
                <div class="img"><img src="http://file.coderfuli.com/images/X7bcmRWeCRKwRcf5sRmc6KiQJ3DRCdaJ.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.tukuppt.com/" target="_blank">熊猫办公</a>
                    <p style="font-size: 12px;">PPT模板，创意设计素材高效办公</p>
                </div>
        </div>
        <div class="box_chi" title="专注UI设计">
                <div class="img"><img src="http://file.coderfuli.com/images/WSNfM5hp4irMcrNbHaAXFki2yHMNRT4h.png" alt=""></div>
                <div class="text"> 
                  <a href="http://www.uimaker.com/" target="_blank">UIMaker</a>
                    <p style="font-size: 12px;">专注UI设计</p>
                </div>
        </div>
        <div class="box_chi" title="花瓣，陪你做生活的设计师">
                <div class="img"><img src="http://file.coderfuli.com/images/Z3bFzBzZxGxdCPFNkj52KaxZHr3zhR8Y.png" alt=""></div>
                <div class="text"> 
                  <a href="https://huaban.com/" target="_blank">花瓣网</a>
                    <p style="font-size: 12px;">花瓣，陪你做生活的设计师</p>
                </div>
        </div>
</div>
<hr>
<p class="biaoti">外包兼职</p>
<div class="shequBox">
        <div class="box_chi" title="您的专属云端开发团队">
            <div class="img"><img src="http://file.coderfuli.com/images/DGTbaabpwyWFy75ZQwSw856H3MpR6t2i.png" alt=""></div>
            <div class="text"> 
              <a href="https://www.proginn.com/" target="_blank">程序员客栈</a>
                <p style="font-size: 12px;">您的专属云端开发团队</p>
            </div>
        </div>
        <div class="box_chi" title="互联网软件外包服务平台">
                <div class="img"><img src="http://file.coderfuli.com/images/jpzCMzGMFrm783fafapN7sCsYHScYKnG.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.codemart.com/" target="_blank">码市</a>
                    <p style="font-size: 12px;">互联网软件外包服务平台</p>
                </div>
        </div>
        <div class="box_chi" title="互联网软件定制开发平台">
                <div class="img"><img src="http://file.coderfuli.com/images/Ahfmz8bKCsnPKQxXBnjcPAtPHhmWAFzH.png" alt=""></div><div class="text"> 
                        <a href="https://www.kaifabang.com/" target="_blank">开发邦</a>
                          <p style="font-size: 12px;">互联网软件定制开发平台</p>
                </div> 
        </div>
        <div class="box_chi" title="中国领先的企业服务平台">
                <div class="img"><img src="http://file.coderfuli.com/images/aKRJBkXGWP8cA7BQKYFmGmQAFGkx84Mb.png" alt=""></div>
                <div class="text"> 
                        <a href="https://wenzhou.zbj.com/" target="_blank">猪八戒</a>
                          <p style="font-size: 12px;">中国领先的企业服务平台</p>
                </div>
        </div>
        <div class="box_chi" title="程序员兼职外包平台">
                <div class="img"><img src="http://file.coderfuli.com/images/ZNMZ7ahYZKYHebyTNZjZznQbG76Ba223.png" alt=""></div>
                <div class="text"> 
                        <a href="https://www.yuanjisong.com/" target="_blank">猿急送</a>
                          <p style="font-size: 12px;">程序员兼职外包平台</p>
                </div>
        </div>
        <div class="box_chi" title="百万开发者为您提供服务">
                <div class="img"><img src="http://file.coderfuli.com/images/TTsxDaaGdC22Apx4KBnSEGQfsZdMspZ3.png" alt=""></div>
                <div class="text"> 
                        <a href="https://zb.oschina.net/" target="_blank">开源众包</a>
                          <p style="font-size: 12px;">百万开发者为您提供服务</p>
                </div>
        </div>
        <div class="box_chi" title="新型设计开发托付式服务平台">
                <div class="img"><img src="http://file.coderfuli.com/images/JQ8BR2bCRfeRyNiyPj2F3mrYaJRMDE3f.png" alt=""></div>
                <div class="text"> 
                        <a href="https://www.epwk.com/" target="_blank">一品威客</a>
                          <p style="font-size: 12px;">新型设计开发托付式服务平台</p>
                </div>
        </div>
        <div class="box_chi" title="可信赖的外包服务">
                <div class="img"><img src="http://file.coderfuli.com/images/eTNRYHdxpGHrnfK6bt7cZD3BEeThR4Wn.png" alt=""></div>
                <div class="text"> 
                        <a href="https://www.yingxuan.io/" target="_blank">英选</a>
                          <p style="font-size: 12px;">可信赖的外包服务</p>
                </div>
        </div>
        <div class="box_chi" title="重新定义企业应用开发">
                <div class="img"><img src="http://file.coderfuli.com/images/2A4ipMkW2CydEfc4ebYCfPWif34xAHYR.png" alt=""></div>
                <div class="text"> 
                        <a href="http://rrkf.com/" target="_blank">人人开发</a>
                          <p style="font-size: 12px;">重新定义企业应用开发</p>
                </div>
        </div>
        <div class="box_chi" title="零佣金外包平台">
                <div class="img"><img src="http://file.coderfuli.com/images/4pYMzADziYmKEf6M7nAeDZhjjnDz4pPN.png" alt=""></div>
                <div class="text"> 
                        <a href="http://www.taskcity.com/" target="_blank">智城外包</a>
                          <p style="font-size: 12px;">零佣金外包平台</p>
                </div>
        </div>
</div>
<hr>
<p class="biaoti">学习平台 · 教程</p>
<div class="shequBox">
        <div class="box_chi" title="谁一开始不是菜鸟呢">
            <div class="img"><img src="http://file.coderfuli.com/images/TCzjj5xNPww5RJbZf3cbyYysYZQ2W4yi.png" alt=""></div>
            <div class="text"> 
              <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
                <p style="font-size: 12px;">谁一开始不是菜鸟呢</p>
            </div>
        </div>
        <div class="box_chi" title="专注于IT教程和实例">
                <div class="img"><img src="http://file.coderfuli.com/images/a2inJHfGdykxZ2FtPFzQEEK7GdSA373R.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.yiibai.com/" target="_blank">易百教程</a>
                    <p style="font-size: 12px;">专注于IT教程和实例</p>
                </div>
        </div>
        <div class="box_chi" title="IT编程入门网">
                <div class="img"><img src="http://file.coderfuli.com/images/iYHz5DbKxQNaA2r3QnSzHnQnrMPRM7dM.png" alt=""></div>
                <div class="text"> 
                  <a href="http://www.manongjc.com/" target="_blank">码农教程</a>
                    <p style="font-size: 12px;">IT编程入门网</p>
                </div>
        </div>
        <div class="box_chi" title="简单教程、简单编程">
                <div class="img"><img src="http://file.coderfuli.com/images/eYXNZH8mk6BGP8MpTHNmWRfJkHKmkyBY.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.yiibai.com/" target="_blank">简单教程</a>
                    <p style="font-size: 12px;">简单教程、简单编程</p>
                </div>
        </div>
        <div class="box_chi" title="程序员的梦工厂">
                <div class="img"><img src="http://file.coderfuli.com/images/AzGdW4DZ4YkB685MDea5MtNGeKatsMjS.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.imooc.com/" target="_blank">慕课网</a>
                    <p style="font-size: 12px;">程序员的梦工厂</p>
                </div>
        </div>
        <div class="box_chi" title="IT职业在线教育平台">
                <div class="img"><img src="http://file.coderfuli.com/images/QnNcdZSxQPpK7jGiAxGxCj28PMCh8Ffj.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.jikexueyuan.com/" target="_blank">极客学院</a>
                    <p style="font-size: 12px;">IT职业在线教育平台</p>
                </div>
        </div>
        <div class="box_chi" title="连接高校和企业">
                <div class="img"><img src="http://file.coderfuli.com/images/4aK464xrX7iSjDDepiTpGa3JcQihmmKJ.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.lanqiao.cn/" target="_blank">蓝桥云课</a>
                    <p style="font-size: 12px;">连接高校和企业</p>
                </div>
        </div>
        <div class="box_chi" title="职业培训、考试提升在线教育平台">
                <div class="img"><img src="http://file.coderfuli.com/images/QnRnExBkW7J4dnXQEczHQaeYKYwR4S6R.png" alt=""></div>
                <div class="text"> 
                  <a href="https://ke.qq.com/" target="_blank">腾讯课堂</a>
                    <p style="font-size: 12px;">职业培训、考试提升在线教育平台</p>
                </div>
        </div>
        <div class="box_chi" title="程序员视频库">
                <div class="img"><img src="http://file.coderfuli.com/images/yPQtdBA5dn8PTS4TZwT8k4njR22CBQ7c.png" alt=""></div>
                <div class="text"> 
                  <a href="http://yun.itheima.com/" target="_blank">黑马程序员</a>
                    <p style="font-size: 12px;">程序员视频库</p>
                </div>
        </div>
        <div class="box_chi" title="编程语言学习第一站">
                <div class="img"><img src="http://file.coderfuli.com/images/yMQECsbMbANH36JCHBhYQae3rDcb5QZW.png" alt=""></div>
                <div class="text"> 
                  <a href="https://www.weixueyuan.net/" target="_blank">微学苑</a>
                    <p style="font-size: 12px;">编程语言学习第一站</p>
                </div>
        </div>
        <div class="box_chi" title="轻松学习、高效学习，极客帮！">
                <div class="img"><img src="http://file.coderfuli.com/images/ZkGzEWcdcAnQKMmtACeKfZQHZPhPiEJa.jpg" alt=""></div>
                <div class="text"> 
                  <a href="https://time.geekbang.org/" target="_blank">极客时间</a>
                    <p style="font-size: 12px;">轻松学习、高效学习，极客帮！</p>
                </div>
        </div>
        <div class="box_chi" title="让天下没有难学的技术！">
                <div class="img"><img src="http://file.coderfuli.com/images/Z4mphjmktNyxCnMjjdXnrkMMp6XHNFnQ.png" alt=""></div>
                <div class="text"> 
                  <a href="http://www.atguigu.com/" target="_blank">尚硅谷</a>
                    <p style="font-size: 12px;">让天下没有难学的技术！</p>
                </div>
        </div>
</div>

                        </div>
                    </div>
                </div>
                <div id="comment">
        <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.10/vue.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/halo-comment@latest/dist/halo-comment.min.js"></script>
        <div class="bg-white dark:bg-neutral-900 p-8 hover:shadow-lg duration-300 mb-12">
            <halo-comment id="74" type="sheet" class="halo-comment-part"></halo-comment>
        </div>
                </div>
            </div>
            <div class="sidebar lg:w-[27%] block overflow-hidden">
                <div class="flex flex-col space-y-12">
        <div class="widget bg-white w-full p-8 hover:shadow-lg duration-300 dark:bg-neutral-900">
            <div class="widget-title text-black font-bold mb-2 dark:text-[#999]">
                <p>热门文章</p>
            </div>
            <div class="widget-hr border-b border-gray-300 w-full mb-4">
            </div>
            <div class="widget-content text-767676 dark:text-[#999]">
                <ul id="hotPosts">
                    <li class="text-center">Loading……</li>
                </ul>
            </div>
        </div>
    <div class="widget bg-white w-full p-8 hover:shadow-lg duration-300 dark:bg-neutral-900">
        <div class="widget-title text-black font-bold mb-2 dark:text-[#999]">
            <p>最新评论</p>
        </div>
        <div class="widget-hr border-b border-gray-300 w-full mb-4">
        </div>
        <div class="widget-content text-767676 dark:text-[#999]">
                <ul>
                        <li class="py-1 flex justify-start w-full space-x-1">
                            <div class="truncate block">
                                <i class="ri-arrow-right-s-fill"></i>
                                <a class="hover:text-black dark:hover:text-white"
                                   title="666"
                                   href="/archives/cheng-xu-yuan-zuo-lao-le-hui-bei-an-pai-qu-xie-dai-ma-ma-#comment">Lin YuJing
                                    ：666</a>
                            </div>
                        </li>
                        <li class="py-1 flex justify-start w-full space-x-1">
                            <div class="truncate block">
                                <i class="ri-arrow-right-s-fill"></i>
                                <a class="hover:text-black dark:hover:text-white"
                                   title="程序员的救赎"
                                   href="/archives/cheng-xu-yuan-zuo-lao-le-hui-bei-an-pai-qu-xie-dai-ma-ma-#comment">蓝
                                    ：程序员的救赎</a>
                            </div>
                        </li>
                        <li class="py-1 flex justify-start w-full space-x-1">
                            <div class="truncate block">
                                <i class="ri-arrow-right-s-fill"></i>
                                <a class="hover:text-black dark:hover:text-white"
                                   title="121111"
                                   href="/archives/sui-ji-tou-xiang-api#comment">哈哈哈哈哈
                                    ：121111</a>
                            </div>
                        </li>
                        <li class="py-1 flex justify-start w-full space-x-1">
                            <div class="truncate block">
                                <i class="ri-arrow-right-s-fill"></i>
                                <a class="hover:text-black dark:hover:text-white"
                                   title="测试接口"
                                   href="/archives/cheng-xu-yuan-zuo-lao-le-hui-bei-an-pai-qu-xie-dai-ma-ma-#comment">哈哈哈哈哈
                                    ：测试接口</a>
                            </div>
                        </li>
                        <li class="py-1 flex justify-start w-full space-x-1">
                            <div class="truncate block">
                                <i class="ri-arrow-right-s-fill"></i>
                                <a class="hover:text-black dark:hover:text-white"
                                   title="我来加你啦"
                                   href="/archives/cheng-xu-yuan-zuo-lao-le-hui-bei-an-pai-qu-xie-dai-ma-ma-#comment">417376738
                                    ：我来加你啦</a>
                            </div>
                        </li>
                </ul>
        </div>
    </div>
    <div class="widget bg-white w-full p-8 hover:shadow-lg duration-300 dark:bg-neutral-900">
        <div class="widget-title text-black font-bold mb-2 dark:text-[#999]">
            <p>最新文章</p>
        </div>
        <div class="widget-hr border-b border-gray-300 w-full mb-4">
        </div>
        <div class="widget-content text-767676 dark:text-[#999]">
            <ul id="newPosts">
                        <li class="py-1 w-full flex justify-start space-x-1">
                            <i class="ri-arrow-right-s-fill"></i>
                            <a href="/archives/goodbyeex" class="dark:hover:text-white">满足不了你了吗？微信的聊天记录老是给我一些意想不到的惊喜</a>
                        </li>
                        <li class="py-1 w-full flex justify-start space-x-1">
                            <i class="ri-arrow-right-s-fill"></i>
                            <a href="/archives/xiyangxixia" class="dark:hover:text-white">我们好像在哪见过 你记得吗</a>
                        </li>
                        <li class="py-1 w-full flex justify-start space-x-1">
                            <i class="ri-arrow-right-s-fill"></i>
                            <a href="/archives/novelai" class="dark:hover:text-white">二次元AI作画网站NovelAI使用教程</a>
                        </li>
                        <li class="py-1 w-full flex justify-start space-x-1">
                            <i class="ri-arrow-right-s-fill"></i>
                            <a href="/archives/kexueshangwang" class="dark:hover:text-white">科学上网的方法（付费&免费）</a>
                        </li>
                        <li class="py-1 w-full flex justify-start space-x-1">
                            <i class="ri-arrow-right-s-fill"></i>
                            <a href="/archives/sui-ji-tou-xiang-api" class="dark:hover:text-white">随机头像api</a>
                        </li>
            </ul>
        </div>
    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pl-4 pl-8 pl-12 pl-16 pl-20 pl-24 hidden hover:bg-sky-500 hover:text-white">
    </div>
</div>
    <div class="mouse-cursor cursor-outer hidden lg:block" style="" data-no-instant></div>
    <div class="mouse-cursor cursor-inner hidden lg:block" style="" data-no-instant></div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/smoothscroll/1.4.10/SmoothScroll.min.js" type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js" type="application/javascript"></script>
    <script src="/themes/liao_daisy/source/js/daisy.js"></script>
    <script>
        hljs.highlightAll();
        loadHotPost(5, 'https://jiangsihan.cn', 'joe2.0')
        lightBox('.markdown-body img', 'post')
        generateCatalog()
        daisy_cursor()
        var url = location.href;
        var urlstatus = false;
        $(".nav li a").each(function () {
            if ((url + '/').indexOf($(this).attr('href').replace('.html', '')) > -1 && $(this).attr('href').replace('.html', '') != '/') {
                $(this).addClass('text-black dark:text-white font-semibold tracking-wide');
                urlstatus = true;
            } else {
                $(this).removeClass('text-black dark:text-white font-semibold tracking-wide');
            }
        });
        if (!urlstatus) {
            $(".nav li a").eq(0).addClass('text-black dark:text-white font-semibold tracking-wide');
        }
    </script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/instantclick/3.1.0/instantclick.min.js" type="application/javascript" data-no-instant></script>
    <script>
        InstantClick.on('change', function (isInitialLoad) {
            if (isInitialLoad) {
                return
            }
            if (typeof _hmt !== 'undefined') {
                _hmt.push(['_trackPageview', location.pathname + location.search]);
            }
        });
        InstantClick.init()
    </script>
    <div class="joe_container" id="joe_container1 " style="padding-top: 0;display:none">
            <div class="item" title="小程序：前端江太公">
                <p><img src="https://qnc.qjnice.com/1648194459024前端江太公.jpg" alt="" width="100px"></p>
                <p style="text-align: center;">微信小程序</span>
            </div>
            <div class="item" title="公众号：敲代码的小江">
                <p><img src="https://qnc.qjnice.com/1648192571143敲代码的小江.jpg" alt="" width="100px"></p>
                <p style="text-align: center;">微信公众号</span>
            </div>
        </div>
    
</body>
</html>